웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[자바스크립트] axios를 사용하여 비동기 호출시 try catch 구문에서 404 에러의 response를 처리하는 방법
Last Modified : 2022-04-28 / Created : 2022-04-28자바스크립트에서 비동기 통신(ajax)을 사용하기 위해 몇 가지 방법들이 있지만 axios를 사용하는 방법이 가장 많이 쓰이고 있습니다. 아래는 이 경우는 자주 사용하는 try catch 구문에서 api의 응답 결과가 404인 경우의 response를 처리하는 방법에 대하여 알아봅니다.
# try catch 내부의 axios를 사용하여 호출시 404 응답 처리
만약 axios를 사용하여 정상적인 요청과 응답을 받은 경우에는 특별한 문제가 없습니다. 즉 response의 status 값이 200이라면 딱히 처리할 필요가 없죠. 하지만 응답이 항상 정상적인 경우만 존재하지는 않습니다~ 뭔가 에러가 발생하여 서버에서 400 또는 500 등의 status 값이 발생할 수도 있고 404 에러가 발생할 수도 있겠습니다.
만약 정상 응답이 아닌 경우 에러가 발생하고 try catch를 사용한 경우에는 try 내부가 아닌 catch() 내부에서 사용해야만 합니다. 예를들어 만약 api 콜에서 404 에러가 발생한 경우 아래의 코드는 404 response를 처리할 수가 없습니다.
try {
const response = axios.get(url)
if (response.status === 200) {
console.log('Okay')
} else if (response.status === 404) {
console.log('404 Error')
}
}
catch(error) {
}
const response = axios.get(url)
if (response.status === 200) {
console.log('Okay')
} else if (response.status === 404) {
console.log('404 Error')
}
}
catch(error) {
}
이유는 404 응답 자체를 에러로 처리하기 때문이죠. 그럼 어떻게 처리해야 할까요? 아래와 같이 몇 가지 방법들이 존재합니다.
- axios 설정에 { validateStatus: false }를 추가하기
- 에러의 경우 catch 구문에서 처리하기
- 에러의 경우 finally에서 처리하기
여기서 가장 간편한 처리 방법은 바로 첫 번째 방법인 { validateStatus: false }를 옵션값에 추가하는 방법입니다.
위와 같이 옵션을 추가할 경우 status에 대한 검증을 axios에서 따로 하지 않기 때문에 catch로 넘어가지 않습니다. 즉 try() 내부에서 처리할 수 있게됩니다. 코드를 수정하면 아래와 같이 되겠죠.
try {
const response = axios.get(url, { validateStatus: false })
...
const response = axios.get(url, { validateStatus: false })
...
가장 쉽고 간편한 방법입니다. 일단 코드 자체가 간결해서 이 방법이 가장 쉽고 편리하지 않을까 생각됩니다. 추가로 나머지 방법들도 조금 알아보겠습니다.
아래의 두 가지는 결국 response의 응답 처리를 catch 또는 finally에서 처리하는 방법입니다. 여기서 딱히 중요한 부분은 없지만 한 가지는 알아두시면 좋습니다. error의 status로 에러 처리하기가 어렵기 때문에 아래와 같이 response 프로퍼티로 처리해야 합니다.
(X) error.status
(O) error.response.status
즉 아래와 같이 코드를 사용해야 하겠죠.
try {
const response = axios.get(url)
if (response.status === 200) {
console.log('Okay')
}
}
catch(error) {
if (error.response.status === 404) {
console.log('404 Error')
}
}
const response = axios.get(url)
if (response.status === 200) {
console.log('Okay')
}
}
catch(error) {
if (error.response.status === 404) {
console.log('404 Error')
}
}
마지막으로 finally로 처리하는 방법은 catch 구문에서는 특별한 로직을 수행하지 않고 finally()에서 처리하기를 원하는 경우입니다. 딱히 차이는 없습니다.
let response = null
try {
response = axios.get(url)
if (response.status === 200) {
console.log('Okay')
}
}
catch(error) {
response = error.response
console.log('404 Error')
}
finally {
if (response.status === 200) {
...
}
}
try {
response = axios.get(url)
if (response.status === 200) {
console.log('Okay')
}
}
catch(error) {
response = error.response
console.log('404 Error')
}
finally {
if (response.status === 200) {
...
}
}
여기까지 try catch 구문에서의 404 에러 처리 방법에 대하여 알아보았습니다. 404가 아닌 다른 에러 처리가 필요한 경우에도 위와 같은 방법을 동일하게 사용할 수 있을 것입니다.
아래의 글도 찾고 계시지 않나요?
